<template>
	<view class="container">
		<view class="tabs bg-fff">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="flex-align-center">
					<view class="tabs-item flex-column-center" :class="{'tabs-item-select': seckillIndex == index}" v-for="(item,index) in seckillList" :key="index" @click="tabsChange(index)">
						<view>{{item.start_status_text}}</view>
						<!-- <view>{{item.title}}</view> -->
						<view class="time-item">{{item.start_time_text | date("mm/dd hh:MM")}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="con">
			<image class="banner" :src="seckillProduct.detail.file_path"></image>
			
			<view class="countdown flex-center" v-show="countdownStatus == 0">
				<countdown ref='countdown' @returnVal="countdownReturnVal" :config="countdownConfig"></countdown>
			</view>
			<view class="countdown flex-center" v-show="countdownStatus == 1">
				活动即将开始
			</view>
			<view class="countdown flex-center" v-show="countdownStatus == 2">
				活动已到期
			</view>
			<view class="time">活动时间：{{seckillList[seckillIndex].start_time_text || ""}}至{{seckillList[seckillIndex].end_time_text || ""}}</view>
			
			<view class="product">
				<view class="product-item bg-fff flex" v-for="(item,index) in seckillProduct.list" :key="index" @click="jump('/pages/categoty/product/product?id='+item.product_id)">
					<image class="product-item-image" :src="item.product.file_path"></image>
					<view class="product-item-con flex-column-space-between">
						<view class="product-item-name">{{item.product.product_name}}</view>
						<view class="product-item-stock" :style="{background: 'url('+$setting.imageUrl()+'seckill_bg_2.png) no-repeat',backgroundSize: '264rpx 32rpx'}">还剩{{item.stock}}件</view>
						
						<view class="flex-align-center" :style="{background: 'url('+$setting.imageUrl()+'seckill_bg.png) no-repeat',backgroundSize: '410rpx 74rpx', width: '410rpx', height: '74rpx'}">
							<view class="product-item-price"><text>￥</text>{{item.seckill_price}}</view>
							<view class="product-item-old-price"><text>￥</text>{{item.line_price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seckillList: [],
				seckillIndex: 0,
				seckillProduct: {},
				countdownConfig: {
					endstamp: '',
					startstamp: '',
				},
				countdownStatus: '',
				share:{
					title: '',
					imageUrl:'',
            	},
			}
		},
		onLoad() {
			this.getHttp();
		},
		methods: {
			getConfigDataDetail(){
				let params = {
					page_type:'seckill'
				}
				uni.$u.api.getConfigDataDetail(params).then(res => {
					let Detail =  res.data
					this.share.title = Detail.content
					this.share.imageUrl = Detail.image
				})
			},
			countdownReturnVal(status) {
				this.countdownStatus = status;
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			tabsChange(e) {
				this.seckillIndex = e;
				this.getSeckillProduct();
			},
			getSeckillActive() {
				uni.$u.api.getSeckillActive().then(res => {
					this.seckillList = res.list;
					if(res.list.length > 0) {
						this.getSeckillProduct();
					}
				})
			},
			getSeckillProduct() {
				uni.$u.api.getSeckillProduct({seckill_activity_id: this.seckillList[this.seckillIndex].seckill_activity_id}).then(res => {
					this.seckillProduct = res;
					this.countdownConfig.endstamp = this.seckillProduct.detail.end_time;
					this.countdownConfig.startstamp = this.seckillProduct.detail.start_time;
				})
			},
			getHttp() {
				// uni.showLoading({
				// 	title: '加载中...',
				// 	mask: true
				// })
				
				this.getSeckillActive();
				this.getConfigDataDetail()

				// setTimeout(() => {
				// 	uni.hideLoading();
				// }, 800)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		
		.tabs {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 888;
			width: 100%;
			padding: 22rpx 30rpx;
			
			.tabs-item {
				display: inline-flex;
				width: 248rpx;
				height: 108rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				color: #666666;
				margin-right: 20rpx;
				padding:0 10rpx;
				.time-item{
					font-size: 24rpx;
					line-height: 40rpx;
					font-family: Verdana, Geneva, Tahoma, sans-serif;
					font-weight: 500;
				}
			}
			
			.tabs-item-select { 
				background: rgba(232, 13, 13, 0.1);
				color: $uni-color-theme;
			}
		}
		
		.con {
			padding: 176rpx 30rpx 24rpx;
			
			.banner {
				width: 100%;
				height: 272rpx;
				border-radius: 16rpx;
			}
			
			.countdown {
				margin-top: 30rpx;
			}
			
			.time {
				margin-top: 22rpx;
				font-size: 24rpx;
				color: #999999;
				text-align: center;
			}
			
			.product {
				
				.product-item {
					margin-top: 24rpx;
					padding: 22rpx;
					border-radius: 16rpx;
					
					.product-item-image {
						width: 214rpx;
						height: 214rpx;
						border-radius: 16rpx;
					}
					
					.product-item-con {
						margin-left: 20rpx;
						flex: 1;
						
						.product-item-name {
							font-size: 28rpx;
							color: #111111;
						}
						
						.product-item-stock {
							padding-left: 10rpx;
							font-size: 20rpx;
							color: #FFFFFF;
							width: 264rpx;
							height: 32rpx;
						}
						
						.product-item-price {
							font-size: 32rpx;
							// color: $uni-color-theme;
							color: #E80D0D;
							font-weight: bold;
							
							text {
								font-size: 24rpx;
							}
						}
						
						.product-item-old-price {
							font-size: 24rpx;
							text-decoration: line-through;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
